<template>
	<div class="login-wrap" v-loading="loading">
		<div class="logo-form-wrap">
			<h1 class="logo"><img src="images/logo.png" alt=""></h1>
			<el-form :model="form" ref="form" :rules="rules" label-width="0px">
				<el-form-item label prop="username">
					<el-input v-model="form.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label prop="password">
					<el-input v-model="form.password"  placeholder="密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label prop="code">
					<el-col :span="10"><el-input v-model="form.code"  placeholder="验证码"></el-input></el-col>
					<el-col :span="10"><s-identify :identifyCode="identifyCode" @click.native="createCode"></s-identify></el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">登录</el-button>
					<!--<el-button type="primary" @click="showToken">查看cookie中的token</el-button>-->
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import util from '@/libs/util';
import sIdentify from './identify'

export default {
	name : 'pagelogin',
	components : { sIdentify },
	data() {
		let validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入验证码'));
			} else if (value !== this.identifyCode) {
				callback(new Error('验证码错误!'));
			} else {
			callback();
		}
		};
		return {
			identifyCode : '',
			form : {
				username : 'jishu001',
				password : '123456',
				code : '',
			},
			rules : {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				],
				code : [
					// { required : true, message : '请输入验证码', trigger : 'blur' },
					{ validator: validatePass2, trigger: 'blur' }
			],
			},
		};
	},
	computed : {
		...mapState(['rootVuexvalue','loading']),
	},
	created() {
		this.createCode()
	},
	methods : {
		...mapActions('user', [
			'userLogin',
		]),
		// ...mapActions(['userLoginTest']),
		// 创建验证码
		createCode() {
			let code = 'ABCDEFGHJKMNQRTVWXYZ123456789'.split('').sort((a, b) => (Math.random() > 0.5 ? -1 : 1)).slice(0, 4).join('');
			this.identifyCode = code
			this.form.code = code
		},
		// 提交登录
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.userLogin(this.form).then(() => {
					    console.log("准备push首页")
						console.log(util.cookies.get('token'));
						this.$router.push('/')
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		showToken() {
			console.log(util.cookies.get('token'));
		},
	},
};
</script>

<style lang="less" scoped>
.el-button { width: 100% !important; }
.login-wrap{
	width: 100%;
	height: 100vh;
	max-width: 400px;
	margin: 0px auto;
	padding: 0 20px;
	box-sizing: border-box;
	.logo{
		padding:0px 0px 20px;text-align: center;
		img{height:50px;}
	}
	.logo-form-wrap {
		position: relative;
		left: 0;
		top: 40%;
		transform: translateY(-50%);
		width: auto;
		padding: 30px 30px 20px;
		background-color: #fff;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
	}
}
</style>
